<template>
    <div class="home">
        <header>
            <!-- <span class="iconfont icon-zuojiantou"></span> -->
            <h4>八票</h4>
            <!-- <van-icon name="calendar-o" /> -->
        </header>
        <div class="mis">
            <img class="img" src="https://images3.c-ctrip.com/train/2022/PC-H5/banner/H5/banner_h5@3x.png"
                alt="携程火车票" />
            <div class="main">
                <ul>
                    <li @click="c1" :class="s1 ? 'click' : ''">单程</li>
                    <li @click="c2" :class="s2 ? 'click' : ''">往返</li>
                </ul>
                <div class="line" v-show="s1"></div>
                <div class="line2" v-show="s2"></div>
                <div class="input1">
                    <div :class="rotate ? 'ileft' : 'iright'" @click="show = true">
                        {{ city1 }}
                    </div>
                    <div :class="rotate ? 'icon-chage' : 'icon-chage1'" @click="change"></div>
                    <div :class="rotate ? 'iright' : 'ileft'" @click="show2 = true">
                        {{ city2 }}
                    </div>
                </div>

                <div class="input2" @click="show3 = true">
                    出发日期&emsp;&emsp;&emsp;{{ date }}&emsp;&emsp;&emsp;{{ week }}
                </div>

                <button class="btn-orange btn-sel" @click="goSearch">搜索</button><br>
                <div class="small" v-show="city1 && city2">{{ city1 }}-{{ city2 }}</div>
                <div class="clean" @click="clear">清空</div>


                <van-popup v-model:show="show" position="bottom" :style="{ height: '80%' }">
                    <van-index-bar>
                        <div v-for="v in arr" :key="v">
                            <van-index-anchor :index="v" v-show="
                                store.state.station.filter((x) => {
                                    return x.buff == v;
                                }).length > 0
                            " />
                            <div v-for="item in store.state.station.filter((x) => {
                                return x.buff == v;
                            })" :key="item.id" v-show="
    store.state.station.filter((x) => {
        return x.buff == v;
    }).length > 0
">
                                <van-cell :title="item.name" @click="insert(item.name)" />
                            </div>
                        </div>
                    </van-index-bar>
                </van-popup>
                <van-popup v-model:show="show2" position="bottom" :style="{ height: '80%' }">
                    <van-index-bar>
                        <div v-for="v in arr" :key="v">
                            <van-index-anchor :index="v" v-show="
                                store.state.station.filter((x) => {
                                    return x.buff == v;
                                }).length > 0
                            " />
                            <div v-for="item in store.state.station.filter((x) => {
                                return x.buff == v;
                            })" :key="item.id" v-show="
    store.state.station.filter((x) => {
        return x.buff == v;
    }).length > 0
">
                                <van-cell :title="item.name" @click="insert2(item.name)" />
                            </div>
                        </div>
                    </van-index-bar>
                </van-popup>
                <van-calendar v-model:show="show3" :show-confirm="false" @confirm="onConfirm" />

            </div>
        </div>
    </div>

</template>
  
<script setup>
import { ref } from "vue";
import { useStore } from "vuex";
import './scss/style.scss'
import { dateToDay } from '../../../utils'
import router from "@/router";
let store = useStore();
let arr = [
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "W",
    "X",
    "Y",
    "Z",
];
let week = ref('今天')
let timeStamp = ref(`${new Date().getTime()}`)
// let searchDate = ref(`${new Date().toLocaleString().split(" ")[0].split("/")[0]}${new Date().toLocaleString().split(" ")[0].split("/")[1]}${new Date().toLocaleString().split(" ")[0].split("/")[2]}`)


store.dispatch("stationList");
let s1 = ref("click"),
    s2 = ref(""),
    rotate = ref(true),
    city1 = ref(""),
    city2 = ref(""),
    show = ref(false),
    show2 = ref(false),
    show3 = ref(false)
let c1 = () => {
    s1.value = "click";
    s2.value = "";
};
let c2 = () => {
    s1.value = "";
    s2.value = "click";
};
const showPopup = () => {
    show.value = true;
};

const goSearch = () => {
    // localStorage.setItem('date',searchDate.value) 
    // localStorage.setItem('week',week.value) 
    localStorage.setItem("timeStamp", timeStamp.value)
    router.push('/search')
}

let insert = (x) => {
    city1.value = x;
    show.value = false;
};
let insert2 = (x) => {
    city2.value = x;
    show2.value = false;
};
let change = () => {
    rotate.value = !rotate.value
}
const date = ref(`${new Date().getMonth() + 1}月${new Date().getDate()}日`);
const onConfirm = (x) => {
    let time = x
    timeStamp.value = x.getTime()
    let time1 = time.toLocaleString().split(" ")[0].split("/")[1]
    let time2 = time.toLocaleString().split(" ")[0].split("/")[2]
    date.value = `${time1}月${time2}日`
    show3.value = false
    let week1 = new Date(`2022/${time1}/${time2}`).getDay()
    week.value = dateToDay(week1)
    searchDate.value = `${x.toLocaleString().split(" ")[0].split("/")[0]}${x.toLocaleString().split(" ")[0].split("/")[1]}${x.toLocaleString().split(" ")[0].split("/")[2]}`
};
let clear = () => {
    date.value = ""
    city1.value = ""
    city2.value = ""
}
</script>
  
  
  
<style lang="scss">

</style>